<!DOCTYPE html>
<meta charset="UTF-8">
<table id="dg_rowediting" data-type="grid" title="行编辑" style="width: 700px; height: auto"
	data-define="
				iconCls: 'icon-edit', border:false,headerCls:'byb',singleSelect: true, toolbar: '#tb_rowediting', method:'get',
				url: '${rc.contextPath}/assets/ui/jww/demo/testdata/grid_data_edit.json',
				fit:true, fitColumns:true,
				onClickRow: onClickRow
			">
	<thead>
		<tr>
			<th data-define="field:'itemid',width:80">ID</th>
			<th
				data-define="field:'inputattr',width:100,
						editor:{
							type:'inputbox',
							definations:{
								required:true
							}
						}">录入框</th>
			<th
				data-define="field:'productid',width:100,
						formatter:function(value,row){
							return row.productname;
						},
						editor:{
							type:'combobox',
							definations:{
								valueField: 'productid',
								textField: 'productname',
								method:'get',
								url: '${rc.contextPath}/assets/ui/jww/demo/testdata/combobox_data2.json',
								required:true
							}
						}">下拉</th>
			<th data-define="field:'listprice',width:80,align:'right',editor:{type:'numberbox',definations:{precision:1}}">数字</th>
			<th data-define="field:'datefield',width:80,editor:{
							type:'datebox',
							definations:{}
						}">日期</th>
			<th
				data-define="field:'ctreeid',width:80,
								formatter:function(value,row){
									return row.ctreename;
								},
								editor:{
									type:'combotree',
									definations:{
										method:'get',panelWidth:'200',
										valueField: 'ctreeid',
										textField: 'ctreename',
										url: '${rc.contextPath}/assets/ui/jww/demo/testdata/tree_data1.json',required:true
								}
						}">下拉树</th>
			<th data-define="field:'status',width:60,align:'center',editor:{type:'checkbox',definations:{on:'P',off:'X'}}">选择框</th>
		</tr>
	</thead>
</table>
<div id="tb_rowediting" style="height: auto">
	<a href="javascript:void(0)" data-type="abutton" data-define="iconCls:'icon-add',plain:true" onclick="append()">新增</a>
	<a href="javascript:void(0)" data-type="abutton" data-define="iconCls:'icon-delete',plain:true" onclick="remove()">删除</a>
	<a href="javascript:void(0)" data-type="abutton" data-define="iconCls:'icon-save',plain:true" onclick="accept()">保存</a>
	<a href="javascript:void(0)" data-type="abutton" data-define="iconCls:'icon-undo',plain:true" onclick="reject()">回退</a>
	<a href="javascript:void(0)" data-type="abutton" data-define="iconCls:'icon-search',plain:true" onclick="getChanges()">获取变更行</a>
</div>
<script type="text/javascript">
		var editIndex = undefined;
        function endEditing() {
	        if (editIndex == undefined) {
		        return true
	        }
	        if ($('#dg_rowediting').grid('validateRow', editIndex)) {
		        var ed = $('#dg_rowediting').grid('getEditor', { index : editIndex, field : 'productid' });
		        var productname = $(ed.target).combobox('getText');
		        $('#dg_rowediting').grid('getRows')[editIndex]['productname'] = productname;
		        
		        var ed = $('#dg_rowediting').grid('getEditor', { index : editIndex, field : 'ctreeid' });
		        var ctreename = $(ed.target).combotree('getText');
		        $('#dg_rowediting').grid('getRows')[editIndex]['ctreename'] = ctreename;
		        
		        $('#dg_rowediting').grid('endEdit', editIndex);
		        editIndex = undefined;
		        return true;
	        } else {
		        return false;
	        }
        }
        function onClickRow(index) {
	        if (editIndex != index) {
		        if (endEditing()) {
			        $('#dg_rowediting').grid('selectRow', index).grid('beginEdit', index);
			        editIndex = index;
		        } else {
			        $('#dg_rowediting').grid('selectRow', editIndex);
		        }
	        }
        }
        function append() {
	        if (endEditing()) {
		        $('#dg_rowediting').grid('appendRow', { status : 'P' });
		        editIndex = $('#dg').grid('getRows').length - 1;
		        $('#dg_rowediting').grid('selectRow', editIndex).grid('beginEdit', editIndex);
	        }
        }
        function remove() {
	        if (editIndex == undefined) {
		        return
	        }
	        $('#dg_rowediting').grid('cancelEdit', editIndex).grid('deleteRow', editIndex);
	        editIndex = undefined;
        }
        function accept() {
	        if (endEditing()) {
		        $('#dg_rowediting').grid('acceptChanges');
	        }
        }
        function reject() {
	        $('#dg_rowediting').grid('rejectChanges');
	        editIndex = undefined;
        }
        function getChanges() {
	        var rows = $('#dg_rowediting').grid('getChanges');
	        alert(rows.length + ' 行被改变了!');
        }
	</script>
